<template>
  <div class="test-page">
    <div class="container mx-auto p-6">
      <h1 class="text-2xl font-bold mb-6">建议问题功能测试</h1>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 控制面板 -->
        <div class="control-panel bg-white rounded-lg shadow p-6">
          <h2 class="text-lg font-semibold mb-4">控制面板</h2>
          
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium mb-2">模拟消息ID</label>
              <input
                v-model="testMessageId"
                type="text"
                class="w-full border border-gray-300 rounded px-3 py-2"
                placeholder="输入消息ID"
              />
            </div>
            
            <div>
              <label class="block text-sm font-medium mb-2">自定义建议问题</label>
              <textarea
                v-model="customQuestions"
                rows="4"
                class="w-full border border-gray-300 rounded px-3 py-2"
                placeholder="每行一个问题"
              ></textarea>
            </div>
            
            <div class="flex gap-2">
              <button
                @click="testGetSuggestions"
                class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
                :disabled="loading"
              >
                {{ loading ? '获取中...' : '测试获取建议问题' }}
              </button>
              
              <button
                @click="showCustomSuggestions"
                class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
              >
                显示自定义问题
              </button>
              
              <button
                @click="hideSuggestions"
                class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
              >
                隐藏建议问题
              </button>
            </div>
          </div>
        </div>
        
        <!-- 状态显示 -->
        <div class="status-panel bg-white rounded-lg shadow p-6">
          <h2 class="text-lg font-semibold mb-4">状态信息</h2>
          
          <div class="space-y-3">
            <div class="flex justify-between">
              <span class="text-gray-600">建议问题可见:</span>
              <span :class="visible ? 'text-green-600' : 'text-red-600'">
                {{ visible ? '是' : '否' }}
              </span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">加载状态:</span>
              <span :class="loading ? 'text-yellow-600' : 'text-gray-600'">
                {{ loading ? '加载中' : '空闲' }}
              </span>
            </div>
            
            <div class="flex justify-between">
              <span class="text-gray-600">问题数量:</span>
              <span class="text-blue-600">{{ questions.length }}</span>
            </div>
          </div>
          
          <div class="mt-4">
            <h3 class="text-sm font-medium mb-2">当前问题列表:</h3>
            <div class="bg-gray-50 rounded p-3 max-h-40 overflow-y-auto">
              <div v-if="questions.length === 0" class="text-gray-500 text-sm">
                暂无建议问题
              </div>
              <div v-else class="space-y-1">
                <div
                  v-for="(question, index) in questions"
                  :key="index"
                  class="text-sm p-2 bg-white rounded border"
                >
                  {{ question }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 事件日志 -->
      <div class="event-log bg-white rounded-lg shadow p-6 mt-6">
        <h2 class="text-lg font-semibold mb-4">事件日志</h2>
        <div class="bg-gray-50 rounded p-3 max-h-60 overflow-y-auto">
          <div v-if="eventLogs.length === 0" class="text-gray-500 text-sm">
            暂无事件记录
          </div>
          <div v-else class="space-y-1">
            <div
              v-for="(log, index) in eventLogs"
              :key="index"
              class="text-sm p-2 bg-white rounded border flex justify-between"
            >
              <span>{{ log.message }}</span>
              <span class="text-gray-400">{{ formatTime(log.timestamp) }}</span>
            </div>
          </div>
        </div>
        <button
          @click="clearLogs"
          class="mt-2 px-3 py-1 text-sm bg-gray-500 text-white rounded hover:bg-gray-600"
        >
          清空日志
        </button>
      </div>
    </div>
    
    <!-- 悬浮建议问题组件 -->
    <SuggestedQuestions
      :questions="questions"
      :visible="visible"
      :loading="loading"
      @question-click="handleQuestionClick"
      @close="handleClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SuggestedQuestions from '@/components/chat/SuggestedQuestions.vue'
import { getSuggestedQuestions } from '@/service'

// 状态
const questions = ref<string[]>([])
const visible = ref(false)
const loading = ref(false)
const testMessageId = ref('test_message_123')
const customQuestions = ref(`如何优化网站性能？
什么是响应式设计？
如何实现用户认证？
数据库设计的最佳实践是什么？`)

// 事件日志
const eventLogs = ref<Array<{
  timestamp: number
  message: string
}>>([])

// 添加日志
const addLog = (message: string) => {
  eventLogs.value.unshift({
    timestamp: Date.now(),
    message
  })
  
  // 限制日志数量
  if (eventLogs.value.length > 50) {
    eventLogs.value = eventLogs.value.slice(0, 50)
  }
}

// 测试获取建议问题
const testGetSuggestions = async () => {
  if (!testMessageId.value.trim()) {
    addLog('❌ 请输入消息ID')
    return
  }
  
  loading.value = true
  addLog(`🔍 开始获取建议问题，消息ID: ${testMessageId.value}`)
  
  try {
    const response = await getSuggestedQuestions(testMessageId.value)
    addLog(`📝 API响应: ${JSON.stringify(response)}`)
    
    // 处理API响应
    let suggestedQuestions: string[] = []
    if (Array.isArray(response)) {
      suggestedQuestions = response
    } else if (response && typeof response === 'object') {
      if ('data' in response && Array.isArray(response.data)) {
        suggestedQuestions = response.data
      } else if ('questions' in response && Array.isArray(response.questions)) {
        suggestedQuestions = response.questions
      } else if ('suggested_questions' in response && Array.isArray(response.suggested_questions)) {
        suggestedQuestions = response.suggested_questions
      }
    }
    
    if (suggestedQuestions.length > 0) {
      questions.value = suggestedQuestions
      visible.value = true
      addLog(`✅ 获取到 ${suggestedQuestions.length} 个建议问题`)
    } else {
      addLog('⚠️ 没有获取到建议问题')
    }
    
  } catch (error) {
    console.error('获取建议问题失败:', error)
    addLog(`❌ 获取建议问题失败: ${error}`)
  } finally {
    loading.value = false
  }
}

// 显示自定义建议问题
const showCustomSuggestions = () => {
  const customList = customQuestions.value
    .split('\n')
    .map(q => q.trim())
    .filter(q => q.length > 0)
  
  if (customList.length > 0) {
    questions.value = customList
    visible.value = true
    addLog(`✅ 显示 ${customList.length} 个自定义建议问题`)
  } else {
    addLog('⚠️ 没有有效的自定义问题')
  }
}

// 隐藏建议问题
const hideSuggestions = () => {
  visible.value = false
  addLog('🙈 隐藏建议问题')
}

// 处理问题点击
const handleQuestionClick = (question: string) => {
  addLog(`🎯 点击建议问题: ${question}`)
  visible.value = false
  
  // 模拟发送消息
  setTimeout(() => {
    addLog(`📤 模拟发送消息: ${question}`)
  }, 100)
}

// 处理关闭
const handleClose = () => {
  addLog('❌ 用户关闭建议问题')
  visible.value = false
}

// 清空日志
const clearLogs = () => {
  eventLogs.value = []
  addLog('🧹 日志已清空')
}

// 格式化时间
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp)
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 初始化日志
addLog('🚀 建议问题测试页面已加载')
</script>

<style scoped>
.test-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.control-panel,
.status-panel,
.event-log {
  border: 1px solid #e5e7eb;
}

.control-panel h2,
.status-panel h2,
.event-log h2 {
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 滚动条样式 */
.overflow-y-auto::-webkit-scrollbar {
  width: 4px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 2px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style> 